<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>

<script>
import { getSellerData } from "../api"
export default {
  name: "Seller",
  data() {
    return {
      chartInstance: null, // echarts实例
      allData: [],
      currPage: 1, // 当前是第几页
      totalPage: 0, // 返回的数据中总共可以凑几页
      timeId: null,
    }
  },
  mounted() {
    this.initChart()
    this.getData()
    this.startInterval()
    window.addEventListener("resize", this.adaptChart)
    this.adaptChart()
  },
  destroyed() {
    clearInterval(this.timeId)
    window.removeEventListener("resize", this.adaptChart)
  },
  methods: {
    // 初始化echarts
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.seller_ref, "chalk")

      // 设置option
      const option = {
        title: {
          text: "▍商家销售量统计",
          left: 20,
          top: 20,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 鼠标移动轴上有遮罩层
            type: "line",
            z: 0, // 降低鼠标移到柱子上时显示的层级
            lineStyle: {
              color: "#2D3443",
            },
          },
        },
        grid: {
          // 坐标轴的配置
          left: "3%",
          top: "20%",
          right: "3%",
          bottom: "6%",
          containLabel: true, // 给网格设置位置时包含文字的设置
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
        },
        series: [
          {
            type: "bar",
            label: {
              // 调整柱状图文字方向和显示
              show: true,
              position: "right",
              textStyle: {
                color: "white",
              },
            },
            itemStyle: {
              // 指明颜色渐变的方向(上到下还是左到右)
              // 指明不同百分比之下颜色的值
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                // 百分之0状态之下的颜色值
                {
                  offset: 0,
                  color: "#5052EE",
                },
                // 百分之100状态之下的颜色值
                {
                  offset: 1,
                  color: "#AB6EE5",
                },
              ]),
            },
          },
        ],
      }

      this.chartInstance.setOption(option)

      // 鼠标移入停止定时器
      this.chartInstance.on("mouseover", () => {
        clearInterval(this.timeId)
      })
      // 鼠标移除开启定时器
      this.chartInstance.on("mouseout", () => {
        this.startInterval()
      })
    },
    // 获取数据
    async getData() {
      const res = await getSellerData()
      // 将数据从小到大排列
      this.allData = res.sort((a, b) => a.value - b.value)
      // 每五个元素显示一页
      this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : this.allData.length / 5 + 1
      this.updateChart()
    },
    // 更新数据
    updateChart() {
      // 处理每次只显示五条的数据逻辑
      const start = (this.currPage - 1) * 5,
        end = this.currPage * 5
      const showData = this.allData.slice(start, end)
      let xArr = [],
        yArr = []
      showData.map((item) => {
        yArr.push(item.name)
        xArr.push(item.value)
      })
      const option = {
        yAxis: {
          data: yArr,
        },
        series: [
          {
            data: xArr,
          },
        ],
      }
      this.chartInstance.setOption(option)
    },
    // 定时器轮询
    startInterval() {
      if (this.timeId) {
        clearInterval(this.timeId)
      }
      this.timeId = setInterval(() => {
        console.log(this.currPage, this.totalPage)
        // 边界判断
        this.currPage++
        if (this.currPage > this.totalPage) {
          this.currPage = 1
        }
        this.updateChart()
      }, 3000)
    },
    // 分辨率适配
    adaptChart() {
      // 随着屏幕的大小改变而改变
      const fontsize = (this.$refs.seller_ref.offsetWidth / 100) * 3.6
      const option = {
        title: {
          textStyle: {
            // 标题的样式配置
            fontSize: fontsize,
          },
        },
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: fontsize,
            },
          },
        },
        series: [
          {
            barWidth: fontsize,
            itemStyle: {
              barBorderRadius: [0, fontsize / 2, fontsize / 2, 0], //（圆角：顺时针左上，右上，右下，左下）
            },
          },
        ],
      }
      this.chartInstance.setOption(option)
      // 调用图表事件 图表才会发生大小
      this.chartInstance.resize()
    },
  },
}
</script>
